<template>
	<el-container>
		<el-header>
			<el-alert title="温馨提示：1.切换存储方式后，需要将资源文件传输至新的存储端；2.请勿随意切换存储方式，可能导致图片无法查看" type="warning" show-icon></el-alert>
		</el-header>
		<el-main>
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
				<el-table-column label="存储方式" prop="name"></el-table-column>
				<el-table-column label="存储位置" prop="path"></el-table-column>
				<el-table-column label="状态" prop="status" width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
						<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="120">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">设置</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<saveLocal-dialog v-if="dialog.save" ref="saveLocalDialog" @success="handleSuccess" @closed="dialog.save=false"></saveLocal-dialog>
	<saveQiniu-dialog v-if="dialogQiniu.save" ref="saveQiniuDialog" @success="handleSuccess" @closed="dialogQiniu.save=false"></saveQiniu-dialog>
	<saveAliyun-dialog v-if="dialogAliyun.save" ref="saveAliyunDialog" @success="handleSuccess" @closed="dialogAliyun.save=false"></saveAliyun-dialog>
	<saveTencent-dialog v-if="dialogTencent.save" ref="saveTencentDialog" @success="handleSuccess" @closed="dialogTencent.save=false"></saveTencent-dialog>

</template>

<script>
	import saveLocalDialog from './local'
	import saveQiniuDialog from './qiniu'
	import saveAliyunDialog from './aliyun'
	import saveTencentDialog from './tencent'

	export default {
		name: "client",
		components: {
			saveLocalDialog,
			saveQiniuDialog,
			saveAliyunDialog,
			saveTencentDialog
		},
		data(){
			return {
				dialog: {
					save: false
				},
				dialogQiniu: {
					save: false
				},
				dialogAliyun: {
					save: false
				},
				dialogTencent: {
					save: false
				},
				apiObj: this.$API.setting.storage.lists,
				selection: []
			}
		},
		methods: {
			//编辑
			table_edit(row){
				if(row.engine == 'local'){
					this.dialog.save = true
					this.$nextTick(() => {
						this.$refs.saveLocalDialog.open('edit').setData(row)
					})
				}
				if(row.engine == 'qiniu'){
					this.dialogQiniu.save = true
					this.$nextTick(() => {
						this.$refs.saveQiniuDialog.open('edit').setData(row)
					})
				}
				if(row.engine == 'aliyun'){
					this.dialogAliyun.save = true
					this.$nextTick(() => {
						this.$refs.saveAliyunDialog.open('edit').setData(row)
					})
				}
				if(row.engine == 'qcloud'){
					this.dialogTencent.save = true
					this.$nextTick(() => {
						this.$refs.saveTencentDialog.open('edit').setData(row)
					})
				}
			},
			//本地更新数据
			handleSuccess(){
				this.$refs.table.upData()
				// this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
				// 	Object.assign(item, data)
				// })
			}
		}
	}
</script>

<style>
</style>
